<template>
  <!-- 文章列表内容 -->
  <div class="article_list_box">
    <el-card class="box-card">
      <!-- <div>文章列表</div> -->
      <el-table :data="data.articleList" style="width: 100%" border>
        <el-table-column type="selection" width="55" />
        <el-table-column
          label="文章封面"
          width="160"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-image
                style="width: 150px; height: 90px"
                :src="scope.row.articleCover"
                :preview-src-list="[scope.row.articleCover]"
                fit="fill"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="articleTitle"
          label="标题"
          width="100"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="categoryName"
          label="分类"
          width="100"
          header-align="center"
          align="center"
        />

        <el-table-column
          label="标签"
          width="160"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-evenly;
              "
            >
              <el-tag
                class="ml-2"
                type="success"
                v-for="item in scope.row.tagDTOList"
                >{{ item.tagName }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="viewsCount"
          label="浏览量"
          width="80"
          header-align="center"
          align="center"
          :formatter="organNameFormat1"
        />
        <el-table-column
          prop="likeCount"
          label="点赞量"
          width="80"
          header-align="center"
          align="center"
          :formatter="organNameFormat2"
        />

        <el-table-column
          label="类型"
          width="80"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-tag
                class="ml-2"
                :type="scope.row.type == 1 ? '' : 'success'"
                >{{ scope.row.type == 1 ? '原创' : '转载' }}</el-tag
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="发表时间"
          width="120"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon
              >{{ scope.row.createTime.split('T')[0] }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="置顶"
          width="100"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-switch
                v-model="scope.row.isTop"
                class="ml-2"
                style="
                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #ff4949;
                "
              />
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="data.currentPage"
        background
        v-model:page-size="data.pageSize"
        :page-sizes="[5, 10, 20]"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script setup>
import { Timer } from '@element-plus/icons-vue'
const data = reactive({
  articleList: [],
  currentPage: 1, //当前页码
  pageSize: 5, //每页显示的行数
  total: 0, //列表总条数
})

//vue3方法写法
//解决数据为null时不显示数据，我们就让它默认为0
const organNameFormat1 = (row) => {
  return row.viewsCount == null ? '0' : row.viewsCount
}
const organNameFormat2 = (row) => {
  return row.likeCount == null ? '0' : row.likeCount
}

// 点击一页显示多少按钮
const handleSizeChange = (e) => {
  data.pageSize = e
  getArticleList(1, data.pageSize)
}
//点击页码按钮
const handleCurrentChange = (e) => {
  data.currentPage = e
  getArticleList(data.currentPage, data.pageSize)
}
onMounted(() => {
  //获取列表数据
  getArticleList(data.currentPage, data.pageSize)
})
const getArticleList = (current, size) => {
  req
    .getArticlesList({
      current: current,
      size: size,
      isDelete: 0,
    })
    .then((e) => {
      if (e.code == 20000) {
        data.total = e.data.count
        e.data.recordList.forEach((el) => {
          el.isTop = el.isTop == 1 ? true : false
        })
        data.articleList = e.data.recordList
      }
    })
}
</script>
<style lang="less">
.article_list_box {
  width: 100%;
  height: 590px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .box-card {
    width: 98%;
    height: 100%;
    overflow: auto;
  }
}
</style>
